<!--左侧面板-->
<template>
    <el-collapse :value="['layoutComponent','basicComponents','formComponents','customComponent']">
        <el-collapse-item name="layoutComponent" title="布局组件">
            <template slot="title">
                <div class="panel-title">
                    布局组件
                </div>
            </template>
            <left-components-by-layouts :layout="layout" :clone="cloneLayout"
                                        :choose="choosLayouts"></left-components-by-layouts>
        </el-collapse-item>
        <el-collapse-item name="basicComponents" disabled>
            <template slot="title">
                <div class="panel-title">
                    基本组件
                </div>
            </template>
        </el-collapse-item>
        <el-collapse-item name="formComponents" disabled>
            <template slot="title">
                <div class="panel-title">
                    表单组件
                </div>

            </template>
        </el-collapse-item>
        <el-collapse-item name="customComponent" disabled>
            <template slot="title">
                <div class="panel-title">
                    自定义组件
                </div>

            </template>
        </el-collapse-item>
    </el-collapse>

</template>
<script>
  import LeftComponentsByLayouts from "./LeftComponentsByLayouts";

  let layoutGlobalId = 100;
  let compnentGlobalId = 100

  export default {
    name: 'LeftPanel',
    components: {LeftComponentsByLayouts},
    data() {
      return {
        dragging: false,
        layout: [
          {
            name: '布局 1', id: 0, componentName: 'IFlex',
            iStyle: {},
            iClass: [],
            num: [{
              iStyle: {},
              iClass: [],
              itemList: [],
              layoutClass: 'flex-sub',
            }]
          },
          {
            name: '布局 2:2', id: 1, componentName: 'IFlex',
            iStyle: {},
            iClass: [],
            num: [{
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }]
          },
          {
            name: '布局 3:3:3', id: 2, componentName: 'IFlex',
            iStyle: {},
            iClass: [],
            num: [{
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }]
          },
          {
            name: '布局 1:1:1:1', id: 3, componentName: 'IFlex',
            iStyle: {},
            iClass: [],
            num: [{
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }]
          },
          {
            name: '布局 1:1:1:1:1', id: 4, componentName: 'IFlex',
            iStyle: {},
            iClass: [],
            num: [{
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iClass: [],
              iStyle: {},
              layoutClass: 'flex-sub',
              itemList: []
            }, {
              iStyle: {},
              iClass: [],
              layoutClass: 'flex-sub',
              itemList: []
            }]
          },
        ],
      }
    },
    methods: {
      addMyComponents() {
        this.$store.commit('setPatternComponentslList', {list: []})
        this.$store.commit('setPattern', {pattern: 'component'})
      },
      changeInfo(evt) {
        this.listNull = []
      },
      cloneLayout(cloneObj) {
        let newObj = {...cloneObj}
        layoutGlobalId++
        newObj.id = layoutGlobalId
        let nullNum = []
        for (let i = 0; i < newObj.num.length; i++) {
          let {layoutClass,} = newObj.num[i]
          nullNum.push({itemList: [], layoutClass, iStyle: {}, iClass: []})
        }
        newObj.iStyle = {}
        newObj.iClass = []
        newObj.num = nullNum
        return newObj
      },
      cloneComponent(cloneObj) {
        let newObj = JSON.parse(JSON.stringify(cloneObj))
        newObj.id = compnentGlobalId++
        return newObj
      },
      cloneMyComponent(cloneObj) {
        let newObj = {...cloneObj}
        newObj.id = compnentGlobalId++
        newObj.iStyle = {}
        newObj.iClass = []
        return newObj
      },
      choosComponents() {
        this.$store.commit('setIflexGroup', {iflexGroup: 'components'})
      },
      choosLayouts() {
        this.$store.commit('setIflexGroup', {iflexGroup: 'layouts'})
      },
      filterListFun(list) {
        let filterListStr = JSON.stringify(list)
        filterListStr = filterListStr.replace(/"IFlex"/g, '"SimpleIflex"')
        return JSON.parse(filterListStr)
      },
    },
  };
</script>

<style lang="stylus" scoped>
    .panel-title {
        width: 100%
        text-align: center
    }

</style>
